<template>
	<div class="login_container">
		<el-form ref="loginForm" :model="form" :rules="rules" class="login-box" label-position="left">
			<div class="login-title">系统登录</div>
			<el-form-item prop="account">
				<el-input
					type="text"
					placeholder="请输入账号"
					v-model="form.account"
					class="account_input"
					size="large"
					maxlength="32"
				>
					<template #prefix>
						<i class="el-icon-user-solid login_account_icon"> </i>
					</template>
				</el-input>
			</el-form-item>
			<el-form-item prop="pwd">
				<el-input
					type="pwd"
					placeholder="请输入密码"
					v-model="form.pwd"
					class="password_input"
					show-password
					size="large"
					maxlength="16"
				>
					<template #prefix>
						<i class="el-icon-lock login_password_icon"> </i>
					</template>
				</el-input>
			</el-form-item>
			<el-button :loading="is_loading" type="primary" class="login-submit" v-on:click="onSubmit('loginForm')"
				>登录</el-button
			>
		</el-form>
		<el-dialog title="请选择角色" v-model="dialogVisible" width="20rem" :before-close="handleClose">
			<div class="dialog_role_select">
				<el-select v-model="selectedRoleID" placeholder="请选择登录的角色(2分钟内)">
					<el-option v-for="item in roles" :key="item.id" :label="item.name" :value="item.id"> </el-option>
				</el-select>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="TRLoginSubmit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import { ElMessage } from 'element-plus'
import { LoginByAP, LoginByTR } from '@/apis/login'
export default {
	name: 'Login',
	data() {
		return {
			dialogVisible: false,
			temporaryTonken: null,
			selectedRoleID: null,
			roles: [],
			form: {
				account: 'super_admin',
				pwd: '123.123',
			},
			rules: {
				account: [{ required: true, message: '账号不可为空', trigger: 'blur' }],
				pwd: [{ required: true, message: '密码不可为空', trigger: 'blur' }],
			},
			is_loading: false,
		}
	},
	mounted() {
		this.$store.commit('user/outLogin')
	},
	methods: {
		TRLoginSubmit() {
			let data = {
				role_id: this.selectedRoleID,
			}
			LoginByTR(data, this.temporaryTonken)
				.then(res => {
					if (res.status) {
						this.$store.dispatch('user/setUserInfo', {
							token: res.data.token,
							userInfo: res.data.user_info,
							permsisions: res.data.permissions,
							roleSign: res.data.roleSign,
						})

						ElMessage.success({
							duration: 1800,
							message: `登录成功，${res.data.user_info.nickname}`,
							type: 'success',
						})
						this.$router.replace('./')
					}
				})
				.catch(response => {
					console.log(response.message)
					ElMessage.error({
						duration: 5000,
						message: response.data.message,
						type: 'error',
					})
				})
		},
		onSubmit(formName) {
			this.is_loading = true
			this.$refs[formName].validate(valid => {
				if (valid) {
					LoginByAP(this.form)
						.then(res => {
							this.is_loading = false
							if (res.status) {
								console.log(res)
								this.temporaryTonken = res.data.token
								this.roles = res.data.roles
								this.dialogVisible = true
							}
						})
						.catch(response => {
							ElMessage.error({
								duration: 5000,
								message: response.data.message,
								type: 'error',
							})
							this.is_loading = false
						})
				} else {
					this.is_loading = false
				}
			})
		},
		handleClose() {
			this.$confirm('确认关闭？这将会需要重新登录！').then(() => {
				this.temporaryTonken = null
				this.form.account = null
				this.form.pwd = null
				this.dialogVisible = false
			})
		},
	},
}
</script>
<style lang="scss" scoped>
:deep(.el-input__inner) {
	height: 45px;
}
:deep(.el-input__prefix) {
	line-height: 45px;
}

.login_container {
	max-width: 100%;
	height: 100%;
	background-color: #2d3a4b;
	overflow: hidden;
}
.login-box {
	margin: auto;
	max-width: 30rem;
	padding: 9rem 2rem;
}
.login-submit {
	width: 100%;
	font-size: 1.2rem;
	font-weight: bolder;
	letter-spacing: 6px;
	color: #eee;
}
.login-title {
	color: #eee;
	font-size: 2rem;
	font-weight: bolder;
	padding-bottom: 2rem;
	text-align: center;
}
.login_account_icon,
.login_password_icon {
	font-size: 1.3rem;
	vertical-align: middle;
}
.dialog_role_select {
	text-align: center;
}
.dialog-footer {
	text-align: center;
}
</style>
